<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录 - API Key申请系统</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.4.4/dist/index.css" crossorigin="anonymous">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-container {
            background: white;
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            position: relative;
            overflow: hidden;
        }

        .login-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .login-title {
            font-size: 28px;
            font-weight: 700;
            color: #303133;
            margin: 0 0 8px 0;
        }

        .login-subtitle {
            font-size: 14px;
            color: #909399;
            margin: 0;
        }

        .login-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 24px;
            color: white;
        }

        .el-form-item {
            margin-bottom: 24px;
        }

        .el-input {
            border-radius: 8px;
        }

        .el-input__wrapper {
            border-radius: 8px;
        }

        .login-button {
            width: 100%;
            height: 48px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            margin-bottom: 20px;
        }

        .login-footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e4e7ed;
        }

        .footer-link {
            color: #667eea;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .footer-link:hover {
            color: #764ba2;
        }

        .security-notice {
            background: #f0f9ff;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 20px;
            font-size: 14px;
            color: #1e40af;
            text-align: center;
        }

        @media (max-width: 480px) {
            .login-container {
                margin: 20px;
                padding: 30px 20px;
            }

            .login-title {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="login-container">
            <div class="login-header">
                <div class="login-icon">🔐</div>
                <h1 class="login-title">管理员登录</h1>
                <p class="login-subtitle">API Key申请系统管理后台</p>
            </div>

            <div class="security-notice">
                <strong>🛡️ 安全提示：</strong> 请使用管理员账号登录，确保账号安全。
            </div>

            <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" @submit.prevent="handleLogin">
                <el-form-item prop="username">
                    <el-input 
                        v-model="loginForm.username" 
                        placeholder="请输入用户名"
                        size="large"
                        prefix-icon="User"
                        clearable>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input 
                        v-model="loginForm.password" 
                        type="password" 
                        placeholder="请输入密码"
                        size="large"
                        prefix-icon="Lock"
                        show-password
                        @keyup.enter="handleLogin">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
                </el-form-item>

                <el-form-item>
                    <el-button 
                        type="primary" 
                        class="login-button"
                        @click="handleLogin"
                        :loading="logging">
                        {{ logging ? '登录中...' : '登录' }}
                    </el-button>
                </el-form-item>
            </el-form>

            <div class="login-footer">
                <a href="/apply.html" class="footer-link">← 返回申请页面</a>
            </div>
        </div>
    </div>

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3.3.8/dist/vue.global.js"></script>
    <!-- Element Plus -->
    <script src="https://unpkg.com/element-plus@2.4.4/dist/index.full.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue@2.1.0/dist/index.iife.min.js"></script>

    <script>
        const { createApp, ref, reactive, onMounted } = Vue;
        const { ElMessage } = ElementPlus;

        createApp({
            setup() {
                // 响应式数据
                const logging = ref(false);
                const loginFormRef = ref(null);

                // 登录表单
                const loginForm = reactive({
                    username: '',
                    password: '',
                    rememberMe: false
                });

                // 表单验证规则
                const loginRules = {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 20, message: '用户名长度应为3-20位', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '密码长度应为6-20位', trigger: 'blur' }
                    ]
                };

                // 处理登录
                const handleLogin = async () => {
                    if (!loginFormRef.value) return;

                    try {
                        const isValid = await loginFormRef.value.validate();
                        if (!isValid) {
                            return;
                        }
                        
                        logging.value = true;

                        // 模拟登录请求
                        const response = await fetch('/api/admin/login', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                username: loginForm.username,
                                password: loginForm.password,
                                rememberMe: loginForm.rememberMe
                            })
                        });

                        const result = await response.json();

                        if (response.ok && result.success) {
                            ElMessage.success('登录成功！');
                            
                            // 保存登录状态
                            if (result.data && result.data.token) {
                                localStorage.setItem('admin_token', result.data.token);
                                localStorage.setItem('admin_user', JSON.stringify(result.data.user));
                            }
                            
                            // 跳转到管理后台页面
                            setTimeout(() => {
                                window.location.href = '/admin-dashboard.html';
                            }, 1000);
                        } else {
                            ElMessage.error(result.message || '登录失败，请检查用户名和密码');
                        }
                    } catch (error) {
                        console.error('Login error:', error);
                        
                        // 临时处理：如果是默认管理员账号，直接跳转
                        if (loginForm.username === 'admin' && loginForm.password === 'admin123') {
                            ElMessage.success('登录成功！');
                            localStorage.setItem('admin_token', 'temp_token_' + Date.now());
                            localStorage.setItem('admin_user', JSON.stringify({
                                id: 1,
                                username: 'admin',
                                name: '系统管理员'
                            }));
                            setTimeout(() => {
                                window.location.href = '/admin-dashboard.html';
                            }, 1000);
                        } else {
                            ElMessage.error('网络错误或用户名密码错误');
                        }
                    } finally {
                        logging.value = false;
                    }
                };

                // 检查是否已登录
                const checkLoginStatus = () => {
                    const token = localStorage.getItem('admin_token');
                    if (token) {
                        // 如果已登录，直接跳转到管理后台页面
                        window.location.href = '/admin-dashboard.html';
                    }
                };

                // 组件挂载时检查登录状态
                onMounted(() => {
                    checkLoginStatus();
                });

                return {
                    logging,
                    loginForm,
                    loginRules,
                    loginFormRef,
                    handleLogin
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>